<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .search-box {
            margin-bottom: 15px;
        }
        .btn-group {
            margin-right: 5px;
        }
        .status-btn {
            padding: 3px 8px;
            font-size: 12px;
        }
        .status-active {
            background-color: #d4edda;
            color: #155724;
        }
        .status-disabled {
            background-color: #f8d7da;
            color: #721c24;
        }
        .modal-lg {
                max-width: 60% !important;
                width: 60% !important;
            }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2>客户管理</h2>

            <!-- 搜索区域 -->
            <div class="search-box">
                <form id="searchForm">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="name">名称：</label>
                            <input class="form-control" id="name" name="name" placeholder="请输入名称查询" type="text">
                        </div>
                        <div class="col-md-3">
                            <label for="contactPerson">联系人：</label>
                            <input class="form-control" id="contactPerson" name="contactPerson"
                                   placeholder="请输入联系人查询"
                                   type="text">
                        </div>
                        <div class="col-md-3">
                            <label for="mobile">手机号码：</label>
                            <input class="form-control" id="mobile" name="mobile" placeholder="请输入手机号码查询"
                                   type="text">
                        </div>
                        <div class="col-md-3">
                            <label for="phone">联系电话：</label>
                            <input class="form-control" id="phone" name="phone" placeholder="请输入联系电话查询"
                                   type="text">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-12 text-right">
                            <button class="btn btn-primary" onclick="search()" type="button">查询</button>
                            <button class="btn btn-secondary" onclick="resetForm()" type="button">重置</button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 操作按钮 -->
            <div class="row mb-3">
                <div class="col-md-12">
                    <button class="btn btn-primary" onclick="addCustomer()" type="button">新增</button>
                    <button class="btn btn-danger" onclick="deleteSelected()" type="button">删除</button>
                </div>
            </div>


            <!-- 数据表格 -->
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="thead-light">
                    <tr>
                        <th><input id="selectAll" type="checkbox"></th>
                        <th>#</th>
                        <th>操作</th>
                        <th>名称</th>
                        <th>联系人</th>
                        <th>手机号码</th>
                        <th>联系电话</th>
                        <th>电子邮箱</th>
                        <th>期初应收</th>
                        <th>期末应收</th>
                        <th>税率(%)</th>
                        <th>排序</th>
                    </tr>
                    </thead>
                    <tbody id="customerList">
                    <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 在页面底部添加模态框 -->
<div class="modal fade" id="addCustomerModal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新增客户</h5>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <form id="customerForm">
                                <!-- 第一行：名称和联系人 -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span class="text-danger">*</span>
                                            <label for="name">名称：</label>
                                            <input class="form-control" id="nameAdd" name="name" type="text">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="contactPerson">联系人：</label>
                                            <input class="form-control" name="contactPerson" type="text">
                                        </div>
                                    </div>
                                </div>

                                <!-- 第二行：手机号码和联系电话 -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="mobile">手机号码：</label>
                                            <input class="form-control" name="mobile" type="text">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="phone">联系电话：</label>
                                            <input class="form-control" name="phone" type="text">
                                        </div>
                                    </div>
                                </div>

                                <!-- 第三行：电子邮箱和传真 -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email">电子邮箱：</label>
                                            <input class="form-control" id="email" name="email" type="email">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="fax">传真：</label>
                                            <input class="form-control" id="fax" name="fax" type="text">
                                        </div>
                                    </div>
                                </div>

                                <!-- 第四行：期初应收和期末应收 -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="initialReceivable">期初应收：</label>
                                            <input class="form-control" id="initialReceivable" name="initialReceivable"
                                                   type="number">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="finalReceivable">期末应收：</label>
                                            <input class="form-control" id="finalReceivable" name="finalReceivable"
                                                   type="number">
                                        </div>
                                    </div>
                                </div>

                                <!-- 第五行：纳税人识别号和税率 -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="taxpayerId">纳税人识别号：</label>
                                            <input class="form-control" id="taxpayerId" name="taxpayerId" required
                                                   type="text">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="taxRate">税率(%)：</label>
                                            <input class="form-control" id="taxRate" name="taxRate" type="number">
                                        </div>
                                    </div>
                                </div>

                                <!-- 第六行：开户行和银行账号 -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="bankName">开户行：</label>
                                            <input class="form-control" id="bankName" name="bankName" type="text">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="bankAccount">银行账号：</label>
                                            <input class="form-control" id="bankAccount" name="bankAccount" type="text">
                                        </div>
                                    </div>
                                </div>

                                <!-- 第七行：地址和排序序号 -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="address">地址：</label>
                                            <input class="form-control" id="address" name="address" type="text">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="sortNum">排序序号：</label>
                                            <input class="form-control" id="sortNum" name="sortNum" type="number">
                                        </div>
                                    </div>
                                </div>

                                <!-- 第八行：备注 -->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="remark">备注：</label>
                                            <textarea class="form-control" id="remark" name="remark"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">保存</button>
                <button class="btn btn-secondary" data-dismiss="modal" type="button">取消</button>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script>

    // 新增->保存客户
function saveCustomer() {
    var formData = $('#customerForm').serialize();

    //名称为空时给出提示
    if ($('#nameAdd').val() == '') {
        alert('名称不能为空');
        return;
    }

    $.ajax({
        url: '/customer/add',
        type: 'GET',
        data: formData,
        success: function(response) {
            if (response && response.code == '1000') {
                $('#addCustomerModal').modal('hide');
                search(); // 刷新列表
                alert('添加成功');
            } else {
                alert('添加失败：' + response.message);
            }
        },
        error: function() {
            alert('请求失败');
        }
    });
}

    // 新增->弹出框
    function addCustomer() {
        //修改modal-title的内容为修改客户
        $('#addCustomerModal .modal-title').text('新增客户');
        // 清空所有输入框数据
        $('#customerForm')[0].reset();
        $('#addCustomerModal').modal('show');
        //给保存按钮绑定单击事件。 onclick="saveCustomer()"
        $('#addCustomerModal .modal-footer button[type="submit"]').unbind('click');
        $('#addCustomerModal .modal-footer button[type="submit"]').click(saveCustomer);
    }

    // 查询数据
    function search() {
        var formData = $('#searchForm').serialize();
        $.ajax({
            url: '/customer/list',
            type: 'GET',
            data: formData,
            success: function(response) {
                if (response && response.data) {
                    renderTable(response.data);
                } else {
                    alert('查询失败');
                }
            },
            error: function() {
                alert('请求失败');
            }
        });
    }

    // 重置表单
    function resetForm() {
        $('#searchForm')[0].reset();
    }

// 删除选中项
function deleteSelected() {
    var selectedIds = [];
    $('input[name="selectedIds"]:checked').each(function() {
        selectedIds.push($(this).val());
    });

    if (selectedIds.length === 0) {
        alert('请至少选择一个客户');
        return;
    }

    if (confirm('确定要删除选中的客户吗？')) {
        $.ajax({
            url: '/customer/delete',
            type: 'GET',
            data: {id: selectedIds.join(',')},
            success: function(response) {
                if (response && response.code == '1000') {
                    search(); // 刷新列表
                    alert('删除成功');
                } else {
                    alert('删除失败：' + response.message);
                }
            },
            error: function() {
                alert('请求失败');
            }
        });
    }
}

// 修改操作列的生成方式
function renderTable(data) {
    var tbody = $('#customerList');
    tbody.empty();

    if (!data || data.length === 0) {
        tbody.append('<tr><td colspan="13" class="text-center">暂无数据</td></tr>');
        return;
    }

    data.forEach(function(customer, index) {
        var row = $('<tr>');
        row.append($('<td>').append($('<input>', {
            type: 'checkbox',
            name: 'selectedId',
            value: customer.id
        })));
        row.append($('<td>').text(index + 1));

        // 修复操作列的生成方式
        var operationCell = $('<td>');
        var editLink = $('<a>', {
            href: '#',
            text: '编辑',
            click: function(e) {
                e.preventDefault();
                editCustomer(customer);
            }
        });
        var deleteLink = $('<a>', {
            href: '#',
            text: '删除',
            click: function(e) {
                e.preventDefault();
                if (confirm('确定要删除这个客户吗？')) {
                    $.ajax({
                        url: '/customer/delete',
                        type: 'GET',
                        data: {id: customer.id},
                        success: function(response) {
                            if (response && response.code == '1000') {
                                search(); // 刷新列表
                                alert('删除成功');
                            } else {
                                alert('删除失败：' + response.message);
                            }
                        },
                        error: function() {
                            alert('请求失败');
                        }
                    });
                }
            }
        });
        operationCell.append(editLink);
        operationCell.append(' ');
        operationCell.append(deleteLink);
        row.append(operationCell);

        row.append($('<td>').text(customer.name));
        row.append($('<td>').text(customer.contactPerson));
        row.append($('<td>').text(customer.mobile));
        row.append($('<td>').text(customer.phone));
        row.append($('<td>').text(customer.email));
        row.append($('<td>').text(customer.initialReceivable));
        row.append($('<td>').text(customer.finalReceivable));
        row.append($('<td>').text(customer.taxRate));
        row.append($('<td>').text(customer.sortNum));
        tbody.append(row);
    });
}

    // 编辑->弹出框，回显数据
function editCustomer(customer) {
    // 清空表单并填充数据
    $('#customerForm')[0].reset();

    //修改modal-title的内容为修改客户
    $('#addCustomerModal .modal-title').text('修改客户');

    // 填充客户信息
    $('#nameAdd').val(customer.name);
    $('.modal-body input[name="contactPerson"]').val(customer.contactPerson);
    $('.modal-body input[name="mobile"]').val(customer.mobile);
    $('.modal-body input[name="phone"]').val(customer.phone);
    $('.modal-body input[name="email"]').val(customer.email);
    $('.modal-body input[name="fax"]').val(customer.fax);
    $('.modal-body input[name="initialReceivable"]').val(customer.initialReceivable);
    $('.modal-body input[name="finalReceivable"]').val(customer.finalReceivable);
    $('.modal-body input[name="taxpayerId"]').val(customer.taxpayerId);
    $('.modal-body input[name="taxRate"]').val(customer.taxRate);
    $('.modal-body input[name="bankName"]').val(customer.bankName);
    $('.modal-body input[name="bankAccount"]').val(customer.bankAccount);
    $('.modal-body input[name="address"]').val(customer.address);
    $('.modal-body input[name="sortNum"]').val(customer.sortNum);
    $('textarea[name="remark"]').val(customer.remark);

    // 显示模态框
    $('#addCustomerModal').modal('show');

    // 修改保存按钮行为为更新
    $('#addCustomerModal .btn-primary').off('click').on('click', function() {
        updateCustomer(customer.id);
    });
}

// 更新客户
function updateCustomer(id) {
    var formData = $('#customerForm').serialize();
    // 添加id参数
    formData += '&id=' + id;

    $.ajax({
        url: '/customer/update',
        type: 'GET',
        data: formData,
        success: function(response) {
            if (response && response.code == '1000') {
                $('#addCustomerModal').modal('hide');
                search(); // 刷新列表
                alert('更新成功');
            } else {
                alert('update失败：' + response.message);
            }
        },
        error: function() {
            alert('请求失败');
        }
    });
}


</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
